<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name='authors' content = '包骐瑞'>
        <meta name="viewport" content="width=device-width">
        <title>个人简历</title>
        <link href="styles/resume.css" rel="stylesheet">
        <script src="scripts/resume.js" defer></script>
    </head>
    <body>
        <div class='bus-frame-top'></div>
        <div class='bus-frame-left'></div>
        <div class='bus-frame-right'></div>
        <img src='images/background.jpg' class='background'>
        <div class='header-background'></div>
        <header>
            <p class='logo'>包骐瑞</p>
            <img src='images/head.png'>
            <div class='connection'>
                <a href='#introduction'>个人介绍</a>
                <div class='header-connection-line'></div>
                <a href='#project'>项目介绍</a>
                <div class='header-connection-line'></div>
                <a href='#interaction'>给我留言</a>
            </div>
        </header>
        <section class='introducePart'>
            <h1>web前端职业规划</h1>
            <p class='introducePart-main'>学习html，css,javascript的使用并熟练掌握</p>
            <div class='introducePart-mail'>
                <img src='images/mail.jpg'>
                <p>xxxxxxxxdlut.mail.edu.cn</p>
            </div>
            <div class='introducePart-phone'>
                <img src='images/phone.png'>
                <p>18088666666</p>
            </div>
        </section>
        <section class='introduction' id='introduction'>
            <article class='introduction-skill'>
                <h1>技能掌握</h1>
                <div class='introduction-skill-box'>
                    <div class='introduction-skill-text'>
                        <p>c</p>
                        <p>c++</p>
                        <p>python</p>
                        <p>java</p>
                        <p>html</p>
                        <p>css</p>
                        <p>javascript</p>
                    </div>
                    <div class='introduction-skill-bar'>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </article>
            <article class='introduction-experience'>
                <ul>
                    <li class='active'><a href="#" class="active">教育经历</a></li>
                    <li><a href="#">工作经历</a></li>
                    <li><a href="#">参赛经历</a></li>
                </ul>
                <div class="panels">
                    <div class='active-panel'>
                        <article>
                            <h2>2001-2005</h2>
                            <p>队列](./practice_chs/queue.md) | 实现一个队列并在页面中显示 | :star: | JavaScript
                                [栈](./practice_chs/stack.md) | 实现一个栈并在页面中显示 | :star: | JavaScript
                                [石头剪刀布](./practice_chs/rock-paper-scissors.md) | 待更新 | :star: | JavaScript                        
                            </p>
                        </article>
                        <article>
                            <h2>2005-2008</h2>
                            <p>[密码解析](./) | 待更新 | :star: | JavaScript
                                [带界面交互的简单计算机](./practice_chs/simplecalc.md) | 实现一个带界面和交互的计算机 | :star: | HTML CSS JavaScript
                                [待办小工具](./practice_chs/todo.md) | 实现一个TODO待办管理小工具 | :star: :star: | HTML CSS JavaScript                          
                            </p>
                        </article>
                        <article>
                            <h2>2008-2014</h2>
                            <p>[带界面交互的简单计算机](./practice_chs/simplecalc.md) | 实现一个带界面和交互的计算机 | :star: | HTML CSS JavaScript
                                [待办小工具](./practice_chs/todo.md) | 实现一个TODO待办管理小工具 | :star: :star: | HTML CSS JavaScript  
                            </p>
                        </article>
                        <article>
                            <h2>2014-2021</h2>
                            <p>[带界面交互的简单计算机](./practice_chs/simplecalc.md) | 实现一个带界面和交互的计算机 | :star: | HTML CSS JavaScript实现一个带界面和交互的计算机实现一个带界面和交互的计算机实现一个带界面和交互的计算机
                            </p>
                        </article>
                    </div>
                    <div>
                        <article>
                            <h2>2001-2005</h2>
                            <p>[带界面交互的简单计算机](./practice_chs/simplecalc.md) | 实现一个带界面和交互的计算机 | :star: | HTML CSS JavaScript
                                [待办小工具](./practice_chs/todo.md) | 实现一个TODO待办管理小工具 | :star: :star: | HTML CSS JavaScript                           
                            </p>
                        </article>
                        <article>
                            <h2>2005-2008</h2>
                            <p>[密码解析](./) | 待更新 | :star: | JavaScript
                                [带界面交互的简单计算机](./practice_chs/simplecalc.md) | 实现一个带界面和交互的计算机 | :star: | HTML CSS JavaScript
                                [待办小工具](./practice_chs/todo.md) | 实现一个TODO待办管理小工具 | :star: :star: | HTML CSS JavaScript                          
                            </p>
                        </article>
                        <article>
                            <h2>2008-2014</h2>
                            <p>[密码解析](./) | 待更新 | :star: | JavaScript
                                [带界面交互的简单计算机](./practice_chs/simplecalc.md) | 实现一个带界面和交互的计算机 | :star: | HTML CSS JavaScript
                                [待办小工具](./practice_chs/todo.md) | 实现一个TODO待办管理小工具 | :star: :star: | HTML CSS JavaScript                          
                            </p>
                        </article>
                        <article>
                            <h2>2014-2021</h2>
                            <p>xxxxxxx xx x x x x x x x x x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                                x x xxxxxxx xx x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                            </p>
                        </article>
                    </div>
                    <div>
                        <article>
                            <h2>2001-2005</h2>
                            <p>xxxxxxx xx x x x x x x x x x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                                x x xxxxxxx xx x x x x x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                            </p>
                        </article>
                        <article>
                            <h2>2005-2008</h2>
                            <p>xxxxxxx xx x x x x x x x x x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                                x x xxxxxxx xx x x x x x x x x x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                            </p>
                        </article>
                        <article>
                            <h2>2008-2014</h2>
                            <p>xxxxxxx xx x x x x x x x x x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                                x x xxxxxxx xx x x x x x x x x x x x  x x x x x x x x x x x x x x 
                            </p>
                        </article>
                        <article>
                            <h2>2014-2021</h2>
                            <p>xxxxxxx xx x x x x x x x x x x x x x x x x x x x x x x x  x x x x x x x x x x x x x x x x x x x x x 
                                x x xxxxxxx xx x x x x x x x x x x x x x x x x x x x x x x x  x xxxxx x x x x x x x x x x x x x x x x x x x 
                            </p>
                        </article>
                    </div>
                </div>
            </article>
        </section>
        
        <div class='project-color' id='project'>
            <div class='project-blank'></div>       
            <section class='project-introduction'>
                <div class='project-pic'><img src='images/project3.jpg' arc='项目1logo' class='项目1logo'></div>
                <article class='project-article'>
                        <h1>项目标题</h1>
                        <div class='participate'>
                            <p>张三</p>
                            <div class='line'></div>
                            <p>纽臂公司</p>
                        </div>
                        <p class='specific'>在灵巧手硬件日臻成熟的前提下，研究工作逐渐集中在如何让灵巧手具备快速识别和定位场景中目标的能力，从而自主规划操作路径和抓取位置，甚至可以在场景未知、目标未知的前提下完成操作任务。灵巧手的研究重点开始由机构设计与传统控制转向智能规划上。
                                灵巧手的操作规划由两指夹持器的操作规划发展而来，其运动规划方法主要分为基于几何驱动的方法和基于数据驱动的方法。
                        </p>
                        <div class='technique'>
                            <p>项目中使用的技术Tag</p>
                            <div class='line'></div>
                            <p>Tag2</p>
                            <div class='line'></div>
                            <p>Tag3</p>
                        </div>
                    </article>
            </section>
            <div class='picture-box'>
                <div class='project-introduction-picture'>
                    <img src='images/hand.jpg' alt="project1-demo" class='project1-demo'>
                </div>
            </div>    
        </div>
        
        <div class='project-none-color'>
            <div class='project-blank'></div> 
            <section class='project-introduction'>
                <div class='project-pic'><img src='images/project3.jpg' arc='项目2logo' class='项目2logo'></div>
                <article class='project-article'>
                    <h1>项目标题</h1>
                    <div class='participate'>
                        <p>张三</p>
                        <div class='line'></div>
                        <p>纽臂公司</p>
                    </div>
                    <p class='specific'>3D手部姿态和网格估计分为基于模型的方法和无模型的方法。目前的大多数3D手部/人体姿态和网格估计是基于模型的方法，它能预测预先定义好的手部/人体网格模型的参数。因为模型的参数嵌入在低维空间，这种基于模型的方法只能通过正确标记的手部关节点坐标训练，而不能使用网格点坐标训练。SMPL和MANO是应用最广泛的参数化人体/手部模型.
                    </p>
                    <div class='technique'>
                        <p>项目中使用的技术Tag</p>
                        <div class='line'></div>
                        <p>Tag2</p>
                        <div class='line'></div>
                        <p>Tag3</p>
                    </div>
                </article>
            </section>
            <div class='picture-box'>
                <div class='project-introduction-picture'>
                    <img src='images/hand.jpg' alt="project2-demo" class='project2-demo'>   
                </div>
            </div>
        </div>

        <div class='project-color'>
            <div class='project-blank'></div> 
            <section class='project-introduction'>
                <div class='project-pic'><img src='images/project3.jpg' arc='项目3logo' class='项目3logo'></div>
                <article class='project-article'>
                    <h1>项目标题</h1>
                    <div class='participate'>
                        <p>张三</p>
                        <div class='line'></div>
                        <p>纽臂公司</p>
                    </div>
                    <p class='specific'>针对SMPL/MANO等使用CNN算法的三维人体姿态估计方法存在的缺陷，同时受到其他基于热图的3D人体姿势估计方法的启发，我们使用了I2L-MeshNet，一种图像到线素的网格预测网络。类似voxel体素(体积+像素)被定义为三维空间中的一个量子化的基本单元，我们定义lixel线素(线+像素)为在一维空间中一个量子化的基本单元。这样一来，我们的I2L-MeshNet就可以对每个网格顶点坐标在1D热图中每个线素的可能性进行估计。
                    </p>
                    <div class='technique'>
                        <p>项目中使用的技术Tag</p>
                        <div class='line'></div>
                        <p>Tag2</p>
                        <div class='line'></div>
                        <p>Tag3</p>
                    </div>
                </article>
            </section>
            <div class='picture-box'>
                <div class='project-introduction-picture'>
                    <img src='images/hand.jpg' alt="project3-demo" class='project3-demo'>
                </div>
            </div>
        </div>
        <section class='interaction'>
            <section class='interaction-atlas'>
                <div class='atlas-first-row'>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box1'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart1'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart1'>
                        </div>
                    </div>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box2'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart2'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart2'>
                        </div>
                    </div>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box3'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart3'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart3'>
                        </div>
                    </div>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box4'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart4'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart4'>
                        </div>
                    </div>
                </div>
                <div class='atlas-second-row'>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box5'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart5'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart5'>
                        </div>
                    </div>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box6'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart6'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart6'>
                        </div>
                    </div>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box7'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart7'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart7'>
                        </div>
                    </div>
                    <div class='interaction-atlas-pic'>
                        <p>information.</p>
                        <div class='redheart-box' id='box8'>
                            <img src='images/whiteheart.png' class='whiteHeart'>
                            <img src='images/redheart.png' class='redHeart' id='redheart8'>
                            <img src='images/redheart.png' class='flyHeart' id='flyheart8'>
                        </div>
                    </div>
                </div>
            </section>
            <section class='interaction-message' id='interaction'>
                <h1>留言板</h1>
                <div class='interaction-message-content'>    
                    <div class='interaction-message-content-box' id='firstBox'>
                        <div class='personalInformation-odd'>
                            <div class='header-pic'>
                                <p>S</p>
                            </div>
                            <p class='personalName'>Smdivnifn</p>
                        </div>
                        <div class='personal-words'>
                            <p>给我留言</p>
                        </div>
                    </div>
                    
                    <div class='interaction-message-content-box'>
                        <div class='personal-words'>
                        </div>
                        <div class='personalInformation'>
                            <div class='header-pic'>
                                <p>S</p>
                            </div>
                            <p class='personalName'>Smith</p>
                        </div>
                    </div>
                    <div class='interaction-message-content-box' id='firstBox'>
                        <div class='personalInformation-odd'>
                            <div class='header-pic'>
                                <p>A</p>
                            </div>
                            <p class='personalName'>Andy</p>
                        </div>
                        <div class='personal-words'>
                            <p>给我留言</p>
                        </div>
                    </div>

                </div>
                <div class='interaction-message-speaking'>
                    <input class= 'words-input' type='text' placeholder="在这里输入留言内容">
                    <div class='input-box'>
                        <input class= 'name-input' type='text' placeholder="您的名字"> 
                        <input class='words-submit' type='submit' value='发表'>
                    </div>
                </div>
                </div>
            </section>
        </section>
        <footer>
            <p>bo-qi</p>
        </footer>
    </body>
</html>